<template>
  <div class="userInfo fixed-top">
    <!-- 引入公共头部 -->
    <NavBar title="个人信息" fixed back/>
    <div class="user-info">
      <div class="person_top">
        <div class="user-box">
          <div class="user_photo">
            <img :src="imageUrl">
            <div class="van-uploader">
              点击上传头像
              <input type="file" accept="image/*" class="van-uploader__input" @change="changeImage($event)">
            </div>
          </div>
        </div>
      </div>
    </div>
    <van-cell-group>
      <van-field label="会员昵称" @change="checkNickname" clearable v-model="userInfo.nickname" placeholder="请输入会员昵称"/>
      <van-field v-model="userInfo.email" @change="checkEmail" type="email" clearable label="会员邮箱" placeholder="请输入邮箱地址"/>
      <div class="van-cell van-field">
        <div class="van-cell__title">
          <span>会员性别</span>
        </div>
        <div class="van-cell__value">
          <div class="van-radio user-sex" >
            <span class="van-radio__input" @click="handelSex(0)">
              <i class="van-icon" :class="{'van-icon-checked': userInfo.sex === 0, 'van-icon-check': userInfo.sex === 1}"></i>
            </span>
            <span class="van-radio__label">男</span>
          </div>
          <div class="van-radio user-sex">
            <span class="van-radio__input" @click="handelSex(1)">
              <i class="van-icon" :class="{'van-icon-checked': userInfo.sex === 1, 'van-icon-check': userInfo.sex === 0}"></i>
            </span>
            <span class="van-radio__label">女</span>
          </div>
        </div>
      </div>
    </van-cell-group>
    <van-cell-group style="margin-top: 10px">
      <van-cell title="修改密码" is-link @click="$router.push('/user/password')"/>
      <van-cell title="注销登录" is-link @click.native="handelLogout"/>
    </van-cell-group>

    <van-button size="large" type="danger" class="user-save" @click="editMemberInf">保存</van-button>
  </div>
</template>
<script>
import NavBar from '../../components/common/NavBar.vue'
import { Dialog, Toast } from 'vant'
import userInfoApi from '../../api/user'
import header from '@/assets/user/header.png'
export default {
  name: 'userInfo',
  data () {
    return {
      imageUrl: header,
      userInfo: {
        nickname: '',
        imageUrl: '',
        email: '',
        sex: 0
      }
    }
  },
  components: {
    NavBar
  },
  created () {
    this.getMemberDetail()
  },
  methods: {
    checkNickname: function () {
      if (this.userInfo.nickname === '') {
      } else {
        if (this.userInfo.nickname.length > 18) {
          Toast.fail('昵称长度不能超过18')
        }
      }
    },
    checkEmail: function () {
      if (this.userInfo.email === '') {
        Toast.fail('邮箱不能为空')
      } else {
        let reg = /^(\w+\.?)*\w+@(?:\w+\.)\w+$/
        if (!reg.test(this.userInfo.email)) {
          Toast.fail('请输入格式正确的邮箱')
          return false
        }
        if (this.userInfo.email.length > 30) {
          Toast.fail('邮箱长度不能超过30')
        }
      }
    },
    getMemberDetail: function () {
      let _this = this
      userInfoApi.getMemberInfoById().then(function (res) {
        let memberDetail = res.data.re
        _this.userInfo = memberDetail
        if (_this.userInfo.sex === null) {
          _this.userInfo.sex = 0
        }
        if (memberDetail.imageUrl !== null && memberDetail.imageUrl !== '') {
          _this.imageUrl = memberDetail.imageUrl
        }
      })
    },
    handelLogout: function () {
      Dialog.confirm({
        message: '确定要注销登录吗？'
      }).then(() => {
        this.$store.dispatch('Logout', this.loginForm).then(response => {
          this.$router.push({ path: this.redirect || '/home' })
        })
      }).catch(() => {
      })
    },
    handelSex: function (val) {
      this.userInfo.sex = val
    },
    changeImage: function (event) {
      let _this = this
      let file = event.target.files[0]
      let reader = new FileReader()
      reader.readAsDataURL(file)
      reader.onload = function (e) {
        // 读取到的图片base64 数据编码 将此编码字符串传给后台即可
        let base64String = e.target.result
        _this.userInfo.image = base64String
        _this.userInfo.imageUrl = base64String.replace('data:image/png;base64,', '').replace('data:image/jpeg;base64,', '')
      }
    },
    editMemberInf: function () {
      if (this.userInfo.nickname === null) {
        Toast.fail('还未填写昵称')
        return false
      } else {
        if (this.userInfo.nickname.length > 18) {
          Toast.fail('昵称长度不能超过18')
          return false
        }
      }
      if (this.userInfo.email === '') {
        Toast.fail('邮箱不能为空')
        return false
      } else {
        let reg = /^(\w+\.?)*\w+@(?:\w+\.)\w+$/
        if (!reg.test(this.userInfo.email)) {
          Toast.fail('请输入格式正确的邮箱')
          return false
        }
        if (this.userInfo.email.length > 30) {
          Toast.fail('邮箱长度不能超过30')
          return false
        }
      }
      let _this = this
      userInfoApi.editMemberInfo(this.userInfo).then(function (res) {
        if (res.data.success) {
          Toast.success('会员信息保存成功')
          _this.$router.push('/user')
        } else {
          Toast.fail(res.data.msg)
        }
      })
    }
  }
}
</script>
<style>
  .userInfo {
    background: #f9f9f9;
  }
  .user-info {
    background: #fff;
  }
  .user-box {
    overflow: hidden;
    padding: 15px 0;
    width: 100%;
    text-align: center;
  }

  .user-box .user_photo {
    display: inline-block;
    width: 35%;
    overflow: hidden;
  }

  .user-box img {
    border-radius: 50%;
    width: 100%;
    height: 100%;
    height: 70px;
    width: 70px;
    border: 3px solid #edc700;
  }
  .user-box .van-uploader {
    width: 100%;
    text-align: center;
    display: block;
    font-size: 12px;
    line-height: 25px;
  }
  .userInfo .user-save {
    margin: 6% 3%;
    width: 94%;
  }

  .userInfo .user-sex {
    display: inline-block;
    float: left;
  }
  .userInfo .user-sex .van-radio__label {
    margin-left: 0px;
    margin-right: 8px;
  }
</style>
